<template>
  <Transition name="zoom">
    <el-card v-if="props.hidden" class="box">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <span>{{ props.title }}</span>
          <span @click="emit('close')" style="cursor: pointer">
            <el-icon><Close /></el-icon>
          </span>
        </div>
      </template>
      <slot></slot>
    </el-card>
  </Transition>
</template>
<script lang="ts" setup>
import { Close } from '@element-plus/icons-vue';
const props = defineProps({
  title: { type: String, default: '' },
  hidden: { type: Boolean, default: true }
});
const emit = defineEmits(['close']);
</script>
<style>
.box {
  top: 200px;
  left: 200px;
  width: 400px;
  position: fixed;
  transition: all 500ms;
  transform-origin: bottom center;
}

.zoom-leave-active {
  opacity: 1;
  transform: scale(1);
}

.zoom-enter-active {
  opacity: 0;
  transform: scale(0);
}

.zoom-enter-to {
  opacity: 1;
  transform: scale(1);
}

.zoom-leave-to {
  opacity: 0;
  transform: scale(0);
}
</style>
